<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="优惠券" prop="couponId">
            <id-selector
              v-model="form.couponId"
              placeholder="请选择优惠券"
              dialog-title="选择优惠券"
              :api-function="listEcCoupon"
              :get-api-function="getEcCoupon"
              id-field="couponId"
              name-field="couponName"
              id-label="优惠券ID"
              name-label="优惠券名称"
              search-label="优惠券名称"
              search-placeholder="请输入优惠券名称"
              :extra-columns="[{prop: 'couponType', label: '优惠券类型'}, {prop: 'couponAmount', label: '优惠金额'}]"
              :extra-params="{orgId: currentOrgId}"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户" prop="userId">
            <id-selector
              v-model="form.userId"
              placeholder="请选择用户"
              dialog-title="选择用户"
              :api-function="listUser"
              :get-api-function="getUser"
              id-field="userId"
              name-field="userName"
              id-label="用户ID"
              name-label="用户名称"
              search-label="用户名称"
              search-placeholder="请输入用户名称"
              :extra-columns="[{prop: 'nickName', label: '用户昵称'}, {prop: 'email', label: '邮箱'}]"
              :extra-params="{deptId: currentDeptId}"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="获取类型" prop="getType">
            <el-select v-model="form.getType" placeholder="请选择获取类型">
              <el-option
                v-for="dict in dict.type.ec_get_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { addUserCoupon } from "@/api/fun/userCoupon"
import { listEcCoupon, getEcCoupon } from "@/api/fun/ecCoupon"
import { listUser, getUser } from "@/api/system/user"
import IdSelector from '@/components/IdSelector'


export default {
  name: "UserCouponForm",
  dicts: ['ec_get_type'],
  components: {
    IdSelector
  },
  data() {
    return {
      // 提交状态
      loading: false,
      // 当前用户的组织ID和部门ID
      currentOrgId: null,
      currentDeptId: null,
      // API方法
      listEcCoupon,
      getEcCoupon,
      listUser,
      getUser,
      // 表单参数
      form: {
        couponId: null,
        userId: null,
        getType: null,
        useStatus: 0 // 默认未使用
      },
      // 表单校验
      rules: {
        couponId: [
          { required: true, message: "优惠券不能为空", trigger: "blur" }
        ],
        userId: [
          { required: true, message: "用户不能为空", trigger: "blur" }
        ],
        getType: [
          { required: true, message: "获取类型不能为空", trigger: "change" }
        ]
      }
    }
  },
  created() {
    this.getCurrentUserInfo()
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        couponId: null,
        userId: null,
        getType: null,
        useStatus: 0
      }
      this.resetForm("form")
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true
          // 设置使用状态为未使用
          this.form.useStatus = 0
          addUserCoupon(this.form).then(response => {
            this.$modal.msgSuccess("发放成功")
            // 通知父页面刷新列表
            this.$eventBus.$emit('refreshCouponList')
            this.$tab.closePage()
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    /** 取消按钮 */
    cancel() {
      this.$tab.closePage()
    },
    /** 获取当前用户信息 */
    getCurrentUserInfo() {
      // 从用户信息中获取组织ID和部门ID
      const userInfo = this.$store.state.user.userInfo
      if (userInfo) {
        this.currentOrgId = userInfo.orgId
        this.currentDeptId = userInfo.deptId
      }
    }
  }
}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
</style>